<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="./css/home.css">
  <link rel="stylesheet" href="./css/tabbar.css">
  <link rel="stylesheet" href="./css/swiper.min.css">
  <title>首页</title>

</head>

<body>
  
  <div class="home">
    <!-- <p>home界面</p> -->
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <div class="h-header">
            <img src="./img/顶部banner图.png" alt />
          </div>
        </div>
        <div class="swiper-slide">
          <div class="h-header">
              <!-- <img src="./img/顶部banner图.png" alt /> -->
              <img src="./img/banner3.jpg" alt />
          </div>
        </div>
        <div class="swiper-slide">
          <div class="h-header">
            <img src="./img/顶部banner图.png" alt />
          </div>
        </div>
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>

      <!-- 如果需要导航按钮 -->
      <!-- <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div> -->

      <!-- 如果需要滚动条 -->
      <!-- <div class="swiper-scrollbar"></div> -->
    </div>




    <!-- 宫格部分 -->
    <div class="tools">
      <!-- header部分 -->

      <div class="con">
        <!-- 1 item -->
        <div class="con_item">
          <div class="con_img">
            <img src="./img/问题咨询icon.png" alt />
          </div>
          <div class="con_title">问题咨询</div>
        </div>
        <div class="con_item">
          <div class="con_img">
            <img src="./img/系统公告icon.png" alt />
          </div>

          <div class="con_title">系统公告</div>
        </div>
        <div class="con_item">
          <div class="con_img">
            <img src="./img/我的推广码.png" alt />
          </div>
          <div class="con_title">我的推广码</div>
        </div>
        <div class="con_item">
          <div class="con_img">
            <img src="./img/操作流程icon.png" alt />
          </div>
          <div class="con_title">操作流程</div>
        </div>
      </div>
    </div>

    <!-- 矿机商城 -->
    <div class="mall-header">
      <div class="mall-icon">
        <img src="./img/商城icon.png" alt />
      </div>
      <div class="mall-mall">矿机商城</div>
      <div class="mall-more">更多&nbsp;></div>
    </div>
    <div class="mall-content">
      <div class="mall-content-item">
        <img src="./img/一级矿机.png" alt />
        <div class="mall-dec">
          <h4>一级矿机</h4>
          <h5>释放/小时：5.1/24</h5>
          <p>￥300</p>
        </div>
      </div>
      <div class="mall-content-item">
        <img src="./img/二级矿机.png" alt />
        <div class="mall-dec">
          <h4>二级矿机</h4>
          <h5>释放/小时：18/24</h5>
          <p>￥1000</p>
        </div>
      </div>
      <div class="mall-content-item">
        <img src="./img/一级矿机.png" alt />
        <div class="mall-dec">
          <h4>一级矿机</h4>
          <h5>释放/小时：5.1/24</h5>
          <p>￥300</p>
        </div>
      </div>
      <div class="mall-content-item">
        <img src="./img/一级矿机.png" alt />
        <div class="mall-dec">
          <h4>一级矿机</h4>
          <h5>释放/小时：5.1/24</h5>
          <p>￥300</p>
        </div>
      </div>
      <div class="mall-content-item">
        <img src="./img/一级矿机.png" alt />
        <div class="mall-dec">
          <h4>一级矿机</h4>
          <h5>释放/小时：5.1/24</h5>
          <p>￥300</p>
        </div>
      </div>
    </div>

    <!-- 矿机商城end -->

    <div class="TabBar">
      <router-link to="/home" class="TabBarItem">
        <div>
          <img src="./img/tbActive-1.png" alt />
        </div>
        <div class="tabtext tabtextActive">首页</div>
      </router-link>

      <router-link to="/mine" class="TabBarItem">
        <div>
          <img src="./img/tb-2.png" alt />
        </div>
        <div class="tabtext">我的矿机</div>
      </router-link>

      <router-link to="/buy" class="TabBarItem">
        <div>
          <img src="./img/tb-3.png" alt />
        </div>
        <div class="tabtext">交易大厅</div>
      </router-link>

      <router-link to="/group" class="TabBarItem">
        <div>
          <img src="./img/tb-5.png" alt />
        </div>
        <div class="tabtext">我的团队</div>
      </router-link>

      <router-link to="/member" class="TabBarItem">
        <div>
          <img src="./img/tb-4.png" alt />
        </div>
        <div class="tabtext">会员中心</div>
      </router-link>

    </div>
  </div>

  <script src="./js/swiper.min.js"></script>
  <script>
    var mySwiper = new Swiper('.swiper-container', {
      // direction: 'vertical', // 垂直切换选项
      loop: true, // 循环模式选项

      // 如果需要分页器
      pagination: {
        el: '.swiper-pagination',
      },
      autoplay: {
        delay: 3000,
        stopOnLastSlide: false,
        disableOnInteraction: true,
      },


    })        
  </script>
</body>

</html>